<template>
  <div class="app-container home">
    <div
      class="index-card-wrapper"
      v-for="(row, index) in splitDataList"
      :key="index"
    >
      <monitor-card
        v-for="(item, index) in row"
        :key="index"
        :data="item"
        @selectWarningList="selectWarningList"
      ></monitor-card>
    </div>
    <div class="chart-wrapper">
      <div class="chart-card-wrapper">
        <div class="chart-card-header">
          <i class="el-icon-data-line"></i>
          健康评分
        </div>
        <div class="chart-card-content">
          <div ref="healthChart" style="height: 470px; width: 500px" />
        </div>
      </div>
      <div class="chart-card-wrapper">
        <div class="chart-card-header">
          <i class="el-icon-pie-chart"></i>
          告警分布
        </div>
        <div class="chart-card-content">
          <div ref="warningChart" style="height: 470px; width: 700px" />
        </div>
      </div>
    </div>

    <div class="table-wrapper">
      <div class="table-header">
        <div class="header-left">
          <i class="el-icon-data-line"></i>
          {{ tableInfo.title }}
        </div>
        <div class="header-right" @click="selectWarningList()">
          查看全部
        </div>
      </div>
      <el-table :data="showDetailList" height="200px" border>
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column
          label="监控平台"
          align="center"
          prop="configName"
          width="120px"
        />
        <el-table-column
          label="实例名称"
          align="center"
          prop="instance"
          width="120px"
        />
        <el-table-column
          label="告警时间"
          align="center"
          prop="time"
          width="160px"
        />
        <el-table-column
          label="事件名称"
          align="center"
          prop="name"
          width="200px"
        />
        <el-table-column
          label="告警等级"
          align="center"
          prop="level"
          width="90px"
        >
          <template slot-scope="{ row }">
            <el-tag effect="dark" :type="getLevelType(row)">{{
              getLevelName(row)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="Value"
          align="center"
          prop="value"
          width="80px"
        />
        <el-table-column
          label="告警信息"
          align="center"
          prop="log"
          resizable
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import MonitorCard from "./components/MonitorCard.vue";
import * as echarts from "echarts";
import { fetchList, fetchDetailList } from "@/api/platform";
import { levelMap, levelGroup } from "@/utils/constant";
import WarningChartMixin from '@/mixins/WarningChartMixin'
import HealthChartMixin from '@/mixins/HealthChartMixin'

const defaultTableInfo = {
  title: "告警记录",
  configId: null,
  type: null,
};
export default {
  name: "Index",
  mixins: [WarningChartMixin, HealthChartMixin],
  components: {
    MonitorCard,
  },
  data() {
    return {
      healthChart: null,
      timer: null,
      dataList: [],
      // dataList: [
      //   {
      //     configId: 2,
      //     configType: "zabbix",
      //     name: "MFO",
      //     lastestTime: "2020-10-10 00:01:02",
      //     warning: 10,
      //     critical: 5,
      //     normal: 0,
      //     href: "http://baidu.com",
      //   },
      //   {
      //     configId: 2,
      //     configType: "zabbix",
      //     name: "Zabbix",
      //     lastestTime: "2020-10-11 10:01:02",
      //     warning: 0,
      //     critical: 1,
      //     normal: 2,
      //     href: "http://baidu.com",
      //   },
      //   {
      //     configId: 2,
      //     configType: "zabbix",
      //     name: "Prometheus",
      //     lastestTime: "2020-10-12 23:01:02",
      //     warning: 2,
      //     critical: 4,
      //     normal: 3,
      //     href: "http://baidu.com",
      //   },
      // ],
      detailList: [],
      showDetailList: [],
      tableInfo: defaultTableInfo,
    };
  },
  computed: {
    splitDataList() {
      if (!this.dataList || this.dataList.length == 0) {
        return [];
      }

      let tempList = [];
      let row = 4;
      for (let index = 0; index < this.dataList.length / row; index++) {
        let list = [];
        for (
          let r = 0;
          r < row && index * row + r < this.dataList.length;
          r++
        ) {
          list.push(this.dataList[index * row + r]);
        }
        tempList.push(list);
      }
      return tempList;
    },
  },
  methods: {
    startGetData() {
      if (this.timer) {
        return;
      }
      this.getDataList();
      this.timer = setInterval(() => {
        this.getDataList();
      }, 30000);
    },
    getDataList() {
      fetchList().then((res) => {
        // res.data[1] = res.data[0];
        // res.data[2] = res.data[1];
        this.dataList = res.data;
        this.detailList = this.dataList.reduce((tempList, item) => {
          item.detailList.forEach((detailItem) => {
            detailItem.configId = item.configId;
            detailItem.configName = item.name;
            detailItem.configType = item.configType;
          });
          tempList = tempList.concat(item.detailList);
          return tempList;
        }, []);

        // this.showDetailList = this.detailList;
        this.selectWarningList(this.tableInfo.configId, this.tableInfo.type);
        this.refreshCharts();
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    refreshCharts() {
      // if (this.drawChart) {
      //   return;
      // }
      this.drawChart = true;
      this.drawHealth();
      this.drawWarningChart();
    },
    getLevelName(row) {
      return levelMap[row.configType][row.level].label;
    },
    getLevelType(row) {
      return levelMap[row.configType][row.level].type;
    },
    selectWarningList(configId, type) {
      if (!configId) {
        this.tableInfo = defaultTableInfo;
        this.showDetailList = this.detailList;
        return [];
      }
      let selectMonitor = this.dataList.find(
        (item) => item.configId == configId
      );
      if (!selectMonitor) {
        this.tableInfo = defaultTableInfo;
        return [];
      }
      this.tableInfo = {
        title: "告警记录 - " + selectMonitor.name,
        configId: selectMonitor.configId,
        type: type,
      };
      let tableList = selectMonitor.detailList;
      if (type) {
        const levels = levelGroup[selectMonitor.configType][type];
        tableList = tableList.filter((item) => levels.includes(item.level));
      }
      this.showDetailList = tableList;
    },
  },
  created() {
    window.sp = this;
  },
  mounted() {
    this.startGetData();
    // this.refreshCharts();
  },
};
</script>

<style scoped lang="scss">
.home {
  min-height: calc(100vh - 84px);
  background-color: #f1f2f6;
  display: flex;
  flex-direction: column;
  .index-card-wrapper {
    display: flex;
    justify-items: start;
    flex-wrap: wrap;
    margin-bottom: 20px;
    div:not(:last-child) {
      margin-right: 20px;
    }
  }

  .chart-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .chart-card-wrapper:not(:last-child) {
      margin-right: 20px;
    }
    .chart-card-wrapper {
      color: white;
      display: flex;
      flex-direction: column;
      background-color: white;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      transition: 0.3s;
      width: 100%;
      padding: 20px;
      .chart-card-header {
        padding-bottom: 20px;
        border-bottom: 1px solid #f1f2f6;
        i {
          color: rgb(64, 158, 255);
        }
      }
      .chart-card-content {
        // height: 300px;
        display: flex;
        // height: 100%;
        // width: 100%;
        // display: inline-flex;
        justify-content: center;
      }
    }
  }
  .table-wrapper {
    flex: 1;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 4px;
    .table-header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #f1f2f6;
      .header-right {
        font-weight: 300;
        cursor: pointer;
      }
    }
  }
}

// MFO 风格
@import "~@/assets/styles/platform-variables.scss";
.home {
  background-color: $--platform-color-background;
  .chart-wrapper {
    .chart-card-wrapper {
      background-color: $--platform-color-primary;
      border: none;
      .chart-card-header {
        border-bottom: 1px solid $--platform-color-border;
        color: $--platform-color-font;
        font-weight: 700;
        i {
          color: $--platform-color-main-1;
        }
      }
    }
  }
  .table-wrapper {
    background-color: $--platform-color-primary;
    .table-header {
      border-bottom: 1px solid $--platform-color-border;
      color: $--platform-color-font;
      font-weight: 700;
      i {
        color: $--platform-color-main-1;
      }
      .header-right {
        font-size: 13px;
        color: $--platform-color-main-1;
      }
    }
  }
}
// 修改 element-ui dialog 和 table 样式
::v-deep .table-wrapper {
  .el-dialog {
    background-color: $--platform-color-primary;
    .el-dialog__title {
      color: $--platform-color-font;
    }
  }

  // table 背景色
  .el-table {
    .el-table__cell {
      background-color: $--platform-color-primary;
    }
    .cell {
      color: $--platform-color-font;
    }
    .el-table__empty-block {
      background-color: $--platform-color-primary;
    }
    .el-table__body-wrapper {
      background-color: $--platform-color-primary;
    }
  }
  // hover 颜色
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #6f7573 !important;
  }

  // 边框颜色 Start
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: $--platform-color-border;
  }

  .el-table--border,
  .el-table--group {
    border-color: $--platform-color-border;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-color: $--platform-color-border;
  }

  .el-table--border th,
  .el-table--border th.gutter:last-of-type {
    border-color: $--platform-color-border;
  }

  .el-table--border td,
  .el-table--border th {
    border-color: $--platform-color-border;
  }

  .el-button {
    background-color: $--platform-color-main-1;
    border: none;
  }
  // 边框颜色 END
}
</style>
